<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>9.echarts绘制数据变化图</title>
  </head>
  <body>
    <div id="charts1" style="width: 600px; height: 400px"></div>
    <div id="charts2" style="width: 600px; height: 400px"></div>
    <script src="./echarts/echarts.min.js"></script>
    <script>
      // 1. 获取页面中的标签对象
      const charts1 = document.querySelector('#charts1');
      const charts2 = document.querySelector('#charts2');

      // 2. 初始化对应的对象
      const myChart1 = echarts.init(charts1);
      const myChart2 = echarts.init(charts2);

      // 3. 准备参数
      const option1 = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {},
          },
        ],
      };
      const option2 = {
        legend: {
          data: ['高度(km)与气温(°C)变化关系'],
        },
        tooltip: {
          trigger: 'axis',
          formatter: 'Temperature : <br/>{b}km : {c}°C',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C',
          },
        },
        yAxis: {
          type: 'category',
          axisLine: { onZero: false },
          axisLabel: {
            formatter: '{value} km',
          },
          boundaryGap: false,
          data: ['0', '10', '20', '30', '40', '50', '60', '70', '80'],
        },
        series: [
          {
            name: '高度(km)与气温(°C)变化关系',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 10,
              shadowOffsetY: 10,
            },
            data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5],
          },
        ],
      };

      // 4. 绘制图形
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    </script>
  </body>
</html>
